<template>
    <div class="w-full h-full flex flex-col">
        <div class="w-full flex flex-row justify-between">
            <el-button type="primary" class=" bg-cmain_hover ml-w10" icon="el-icon-plus"
                @click="dialog_add_type = true">添加分类</el-button>
        </div>
        <div class="w-full mt-w20 ">
            <el-table :data="s_article.list_type" stripe style="width: 100%;height: 100%; ">
                <el-table-column type="index" label="序号" min-width="5%">
                </el-table-column>
                <el-table-column prop="name" label="类别名称" min-width="10%">
                </el-table-column>
                <el-table-column prop="logo_url" label="类别图片" min-width="10%">
                    <template slot-scope="scope">
                        <el-image style="width: 60px; height: 60px" :src="scope.row.logo_url" lazy>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序" min-width="10%">
                </el-table-column>
                <el-table-column label="操作" min-width="10%">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="action_edit_type(scope.row)">
                            编辑</el-button>
                        <el-button size="mini" style="background-color:#F56C6C" type="danger"
                            @click="action_del_type(scope.row)">
                            删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex items-end justify-center">
                <el-pagination background layout="prev, pager, next" :total="s_article.m_page.total" :current-page="s_article.m_page.page"
                    :page-size="s_article.m_page.limit" @current-change="action_page_change">
                </el-pagination>
            </div>
        </div>
        <UiDialogAddArticleType :is_showDialog="dialog_add_type" :data="s_article.m_type"
            @nydialog_closed="dialog_add_type = false" @nydialog_submit="action_add_type"></UiDialogAddArticleType>
    </div>
</template>

<script src="./Index.ts"></script>
<style src="./Index.less" lang="less" scoped>
</style>
